<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lazy</title>
    <style>
        .box {
            width: 100vw;
            display: flex;
            flex-wrap: wrap;
            img {
                width: 100px;
                height: 100px;
                margin: 10px;
            }
        }
        .boximg {
            width: 100px;
            height: 100px;
            margin: 10px;
            img {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <div class="boximg">
            <img src="./image/person.jpg" alt="">
        </div> -->
    </div>

    <script>
        let str = 
        `<div class="boximg">
           <img  alt="" data-src="./image/person.jpg">
        </div>`
        render()
        function render() {
            
             let content = ''
             for(let i=0;i<400;i++) {
                let count = (i + 1) % 60
                if(count==0) count = 60
                content+= `
                <img  alt="" data-src="./image/${count}.jpg">
              `;
             }
             document.querySelector('.box').innerHTML += content;

             let boximgs = document.querySelectorAll('img')
            
              /*let boximgs = document.querySelectorAll('.boximg')
            boximgs.forEach(item => {
                 let img = item.querySelector('img')
                 let src = img.getAttribute('data-src')
                 if(img.offsetTop < window.innerHeight + document.body.scrollTop) {
                    img.src = src
                 }
             })*/
             window.addEventListener('scroll', function() {
                let wininnheight =  window.innerHeight 
                let scroolTop = document.body.scrollTop || document.documentElement.scrollTop
                boximgs.forEach((img,index) => {
                        if(!img.src) {
                            console.log(index)
                            let src = img.getAttribute('data-src')
                            if(img.offsetTop < wininnheight + scroolTop) {
                               img.src = src
                            }
                        } 
                        
                })
             })
             


           /*  let firstimgTop = boximgs[0].querySelector('img').offsetTop

             let lastimgTop = boximgs[199].querySelector('img').offsetTop
             console.log(firstimgTop,'firstimgTop')
             console.log(lastimgTop,'lastimgTop')
             console.log(document.documentElement.scrollTop)
             */
            
        }

       

    </script>
   
</body>
</html>